<script setup lang="ts">
  //
  import qs from 'qs';
  import { throttle, cloneDeep } from 'lodash-es';
  import { rightLowCodeShow } from '@/components/LeftTree';
  import { formData, formGroup, tablsType, unitPermissionsRight } from './index';
  // formDataUnit
  import {
    getUnitList,
    getUnitId,
    getdomainList,
    getUnitUpdate,
    saveUnitJson,
    getUnitJson,
    unitPermissions,
    getPhoneUnitJson,
    savePhoneUnitJson,
    GetLanguaggeNum,
  } from '@/api/Unitregein';
  import { ElLoading } from 'element-plus';
  import { getDatalist } from '@/api/cataAccess';
  import { widgetForm } from '@/types/element';

  import { tabsBindValues, treePermission } from './index';
  import { jsondata } from '@/types';
  import useLoading from '@/hooks/loading';
  import webEditor from './pages/index.vue';
  const { loadingIcon, setLoading } = useLoading();
  // const pages = ref<String>('单元');
  const myform = ref<any>(null);
  // const myformUnit = ref<any>(null);
  const submitData = ref<Namespace.UnitObjectSaveUp>({});
  // 判断是否是顶层
  const GroupIs = ref<boolean>(false);
  const tabsValue = ref<Array<tablsType>>([]);
  const childrenId = ref<string>('');
  const numberValue = ref<number>(1);
  const html = ref<string>();
  const JsonContrast = ref<any>();
  const activeNameChild = ref<string>();
  const oldActiveNameChild = ref<string>();
  const isTables = ref<boolean>(false);

  const formOriginalData = ref<any>({});
  const pattern = ref<string>('pc');
  let ysKey = ref<number>(1);
  const basicFields = ref<Array<string>>([
    'input',
    'password',
    'textarea',
    'number',
    'radio',
    'checkbox',
    'time',
    'date',
    'rate',
    'select',
    'switch',
    'slider',
    'text',
    'button',
    'images',
  ]);
  /** 需要添加的表单数据 */
  // const unitFrom = reactive<Array<Array<Namespace.formRules>>>([]);
  // const unitInitial = reactive<Namespace.FormType>({
  //   loadKey: true,
  //   formFields: {},
  //   formRules: [],
  // });
  /** 树形组件传值过来的数据 */
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    regionCode: {
      type: String,
      default: '',
    },
    patternPcPhone: {
      type: String,
      default: 'pc',
    },
  });

  watch(
    props.data,
    async (value) => {
      if (value.dataId.id) {
        if (value.dataId.id == '0') {
          rightLowCodeShow.value = false;
        }
        if (
          value.dataId.attributes &&
          value.dataId.attributes.unitType == 2 &&
          value.dataId.icon == 'jstree-list'
        ) {
          isTables.value = true;
          jsondata.value.config = widgetForm.config = {
            size: 'default',
            labelWidth: 100,
            labelPosition: 'right',
            pageType: false,
            // pageHide: false,
            listHeight: false,
            listExport: false,
            exportFileName: '',
            fieldList: [],
            pagEnum: 10,
            pageSizes: '10, 20, 50, 100',
            pageh: '',
            // locationon: 0,
            // locationback: 0,
            // listcontrol: false,
            query: '',
            listselection: '0',
            actionNo: '',
            defaultSortField: '',
            sortBy: 'asc',
            listUserCustomColumns: false,
            listBottomTurnPage: false,
          };
        } else {
          isTables.value = false;
          jsondata.value.config = widgetForm.config = {
            size: 'default',
            labelWidth: 100,
            labelPosition: 'right',
            displayMode: '',
          };
        }
        jsondata.value.phoneHeaderConfig = widgetForm.phoneHeaderConfig = {
          title: '名称',
          show: true,
          leftBtnTitle: '返回',
          leftBtnMode: '1',
          leftEvent: '',
          rightBtnConfig: {
            element_permissions: false,
            element_enableThe: false,
            element_validationError: '',
            element_title: '提交',
            element_mode: '1',
            element_event: '',
            element_close: '2',
            element_Theunit: '',
            element_sqlFormCode: '',
            element_subtablefields: '',
            element_Thelist: '',
            element_sqlListCode: '',
            element_action: '',
            element_jsFront: '',
            element_jsCallback: '',
            element_jsfailCallback: '',
            element_jserrorCallback: '',
          },
        };
        if (props.patternPcPhone == 'pc') {
          const { data } = await getUnitJson({ id: props.data.dataId.id });
          JsonContrast.value = data;
          let Json;
          if (data != '') {
            Json = JSON.parse(data);
            jsondata.value.display_area = Json.display_area;
            jsondata.value.hidden_area = Json.hidden_area;
            jsondata.value.trash_area = Json.trash_area;
            jsondata.value.button_area = Json.button_area;
            jsondata.value.global_page = Json.global_page;
            jsondata.value.config = Json.config;
            // Json.config;
            jsondata.value.config = Object.assign(widgetForm.config, jsondata.value.config);
            Object.keys(jsondata.value.config).reduce((acc, key) => {
              if (jsondata.value.config[key] === jsondata.value.config[key]) {
                acc[key] = jsondata.value.config[key];
              }
              return acc;
            }, {});
          } else {
            jsondata.value.display_area = []; // 显示区
            jsondata.value.hidden_area = []; // 隐藏区
            jsondata.value.trash_area = []; // 回收站区
            jsondata.value.button_area = []; // 按钮区
            jsondata.value.global_page = {}; // 全局页面
          }
        }

        // console.log(jsondata.value, 'json');
        tabsBindValues.value = '单元';
        childrenId.value = value.dataId.id;
        if (!value.dataId.hasParent && value.dataId.icon == 'jstree-group') {
          tabsValue.value = [{ value: '单元', icons: 'unit' }];
        } else {
          tabsValue.value = [
            { value: '单元', icons: 'unit' },
            { value: '页面', icons: 'pages' },
            { value: '元素', icons: 'element' },
            { value: '预览', icons: 'build' },
          ];
        }
        GroupIs.value =
          !value.dataId.hasParent &&
          value.dataId.parentId == '0' &&
          value.dataId.icon == 'jstree-group';
        if (value.dataId.id == '0') {
          ElMessage.error('类型错误！');
          rightLowCodeShow.value = false;
        } else {
          rightLowCodeShow.value = true;
        }
        const index = tabsValue.value.findIndex((it) => {
          return it;
        });
        if (myform.value && value.dataId.id == '0') {
          myform.value[index].reset();
        }
        // unitInitial.formRules.splice(0, unitInitial.formRules.length);
        await setTimeout(() => {
          momUpdate(rightLowCodeShow.value, value.dataId.id);
        });
      }
    },
    {
      deep: true,
      immediate: true,
    },
  );
  watch(
    () => unitPermissionsRight.value,
    async (value: boolean) => {
      formData.formRules[2][1].required = value;
      formData.formRules[2][1].readonly = !value;

      if (value) {
        const { data } = await getDatalist({ id: props.data.dataId.id, type: '0' });
        if (data.length) {
          formData.formFields.menuPermissions = data[0].menuPermissions;
        } else {
          formData.formFields.menuPermissions = html.value;
        }
      } else {
        formData.formFields.menuPermissions = '';
      }
    },
    {
      deep: true,
      immediate: true,
    },
  );
  watch(
    props,
    async (value) => {
      // console.log('切换菜单value.patternPcPhone', value.patternPcPhone)
      pattern.value = value.patternPcPhone;
      if (pattern.value == 'pc' && value.data.dataId.id) {
        const { data } = await getUnitJson({ id: value.data.dataId.id });
        JsonContrast.value = data;
        let Json;
        if (data != '') {
          Json = JSON.parse(data);
          jsondata.value.display_area = Json.display_area;
          jsondata.value.hidden_area = Json.hidden_area;
          jsondata.value.trash_area = Json.trash_area;
          jsondata.value.button_area = Json.button_area;
          jsondata.value.global_page = Json.global_page;
          jsondata.value.config = Json.config;
          jsondata.value.config = Object.assign(widgetForm.config, jsondata.value.config);
          Object.keys(jsondata.value.config).reduce((acc, key) => {
            if (jsondata.value.config[key] === jsondata.value.config[key]) {
              acc[key] = jsondata.value.config[key];
            }
            return acc;
          }, {});
        } else {
          jsondata.value.display_area = []; // 显示区
          jsondata.value.hidden_area = []; // 隐藏区
          jsondata.value.trash_area = []; // 回收站区
          jsondata.value.button_area = []; // 按钮区
          jsondata.value.global_page = {}; // 全局页面
        }
      } else if (pattern.value == 'phone' && value.data.dataId.id) {
        const { data } = await getPhoneUnitJson({ id: value.data.dataId.id });
        JsonContrast.value = data;
        let Json;
        if (data != '') {
          Json = JSON.parse(data);
          jsondata.value.display_area = Json.display_area;
          jsondata.value.hidden_area = Json.hidden_area;
          jsondata.value.trash_area = Json.trash_area;
          jsondata.value.button_area = Json.button_area;
          jsondata.value.global_page = Json.global_page;
          jsondata.value.config = Json.config;
          jsondata.value.config = Object.assign(widgetForm.config, jsondata.value.config);
          jsondata.value.phoneHeaderConfig = Json.phoneHeaderConfig;
          jsondata.value.phoneHeaderConfig = Object.assign(
            widgetForm.phoneHeaderConfig,
            jsondata.value.phoneHeaderConfig,
          );
          Object.keys(jsondata.value.config).reduce((acc, key) => {
            if (jsondata.value.config[key] === jsondata.value.config[key]) {
              acc[key] = jsondata.value.config[key];
            }
            return acc;
          }, {});
        } else {
          jsondata.value.display_area = []; // 显示区
          jsondata.value.hidden_area = []; // 隐藏区
          jsondata.value.trash_area = []; // 回收站区
          jsondata.value.button_area = []; // 按钮区
          jsondata.value.global_page = {}; // 全局页面
        }
      }
      ysKey.value++;
      await setTimeout(() => {
        momUpdate(rightLowCodeShow.value, value.data.dataId.id);
      });
    },
    {
      deep: true,
      immediate: true,
    },
  );

  const momUpdate = async (value: Boolean, _id: String) => {
    if (value) {
      // unitInitial.formRules.unshift(unitFrom[0], unitFrom[1], ...formData.formRules);
      let dataMap = GroupIs.value ? formGroup.formRules : formData.formRules;

      dataMap.map((item) => {
        item.filter(async (it) => {
          if (it.field == 'dataId') {
            const { data } = await getdomainList('0');
            const select = data.map((item) => {
              return {
                key: item.regionId,
                value: item.regionCode + '(' + item.regionName + ')',
              };
            });
            it.data = select;
          }
          if (it.field == 'parentId') {
            const { data } = await getUnitList(
              { unitId: _id as string, type: '1' },
              props.data.regionId,
            );
            const selectv2 = data.map((item) => {
              return {
                label: item.unitCode ? item.unitCode + ' ' + item.unitName + '' : item.unitName,
                value: item.unitId,
              };
            });
            it.data = selectv2;
            if (props.data.dataId.parentId == '0') {
              it.data?.unshift({ label: '顶部', value: 0 });
            }
          }
        });
      });
      const { data } = await getUnitId({ unitId: _id });
      if (pattern.value == 'pc') {
        html.value = `/sys/unit/show/${props.regionCode}/${data.unitCode}`;
      } else if (pattern.value == 'phone') {
        html.value = `/sys/unit/mobile/${props.regionCode}/${data.unitCode}`;
      }
      if (data) {
        if (GroupIs.value) {
          if (!treePermission.value) {
            formGroup.formFields = data;
          }
        } else {
          if (!treePermission.value) {
            formData.formFields = data;
          }
        }
      } else {
        rightLowCodeShow.value = false;
      }

      if (tabsBindValues.value == '单元' && formData.formFields.unitRight === 1) {
        unitPermissionsRight.value = true;
        formData.formRules[2][1].required = true;
        formData.formRules[2][1].readonly = false;
        const { data } = await getDatalist({ id: props.data.dataId.id, type: '0' });
        if (data.length) {
          formData.formFields.menuPermissions = data[0].menuPermissions;
        } else {
          formData.formFields.menuPermissions = html.value;
        }
      } else {
        unitPermissionsRight.value = false;
        formData.formRules[2][1].required = false;
        formData.formRules[2][1].readonly = true;
      }
    }
    formOriginalData.value = cloneDeep(formData.formFields);
  };
  const sendUpTreeData = inject('sendUpTree') as Function;

  // const getFormUnit = throttle(async () => {
  //   if (myformUnit.value.success && formDataUnit.formFields.menuPermissions != '') {
  //     unitPermissionsRight.value = false;
  //   }
  // });

  const getForm = throttle(async () => {
    numberValue.value++;
    const index = tabsValue.value.findIndex((it) => {
      return it;
    });
    myform.value[index].validate();
    await setTimeout(async () => {
      setLoading(true);
      if (myform.value[index].success) {
        if (submitData.value.createDate && submitData.value.updateDate) {
          delete submitData.value.createDate;
          delete submitData.value.updateDate;
        }
        try {
          let menuPermissions;
          if (formData.formFields.unitRight === 0) {
            menuPermissions = html.value;
          } else {
            menuPermissions = submitData.value.menuPermissions;
          }
          const data = {
            unitId: props.data.dataId.id,
            regionId: props.data.regionId,
            state: formData.formFields.unitRight === 1 ? 1 : 0,
            menuPermissions: menuPermissions,
            name: formData.formFields.unitName,
            code: formData.formFields.unitCode,
          };
          if (
            formData.formFields.unitRight != formOriginalData.value.unitRight ||
            formData.formFields.menuPermissions != formOriginalData.value.menuPermissions
          ) {
            unitPermissions(data);
          }
          // 始终调用更新权限
          // unitPermissions(data);
          // delete submitData.value.menuPermissions;
          const { code } = await getUnitUpdate(qs.stringify(submitData.value));
          if (code == 0) {
            setTimeout(() => {
              sendUpTreeData({ numberValue: numberValue.value, id: props.data.dataId, code: 0 });
              setLoading(false);
            }, 500);
          }
        } catch (error) {
          setLoadingFalse();
        } finally {
          setLoadingFalse();
        }
      }
      setLoadingFalse();
    });
  }, 5000);
  const setLoadingFalse = () => {
    setTimeout(() => {
      setLoading(false);
    }, 500);
  };

  const hanldFromData = async (value) => {
    submitData.value = value as Namespace.UnitObjectSaveUp;
  };

  const handleTabsJson = async (val: any) => {
    if (
      activeNameChild.value != '元素' &&
      oldActiveNameChild.value == '元素' &&
      activeNameChild.value != '单元'
    ) {
      publicFunction(val);
    }
  };
  const handleSendPattern = async (val: string) => {
    pattern.value = val;
    if (
      props.data.dataId.attributes &&
      props.data.dataId.attributes.unitType == 2 &&
      props.data.dataId.icon == 'jstree-list'
    ) {
      isTables.value = true;
      jsondata.value.config = widgetForm.config = {
        size: 'default',
        labelWidth: 100,
        labelPosition: 'right',
        pageType: false,
        // pageHide: false,
        listHeight: false,
        listExport: false,
        exportFileName: '',
        fieldList: [],
        pagEnum: 10,
        pageSizes: '10, 20, 50, 100',
        pageh: '',
        // locationon: 0,
        // locationback: 0,
        // listcontrol: false,
        query: '',
        listselection: '0',
        actionNo: '',
        defaultSortField: '',
        sortBy: 'asc',
        listUserCustomColumns: false,
        listBottomTurnPage: false,
      };
    } else {
      isTables.value = false;
      jsondata.value.config = widgetForm.config = {
        size: 'default',
        labelWidth: 100,
        labelPosition: 'right',
        displayMode: '',
      };
    }
    if (pattern.value == 'pc') {
      const { data } = await getUnitJson({ id: props.data.dataId.id });
      JsonContrast.value = data;
      let Json;
      if (data != '') {
        Json = JSON.parse(data);
        jsondata.value.display_area = Json.display_area;
        jsondata.value.hidden_area = Json.hidden_area;
        jsondata.value.trash_area = Json.trash_area;
        jsondata.value.button_area = Json.button_area;
        jsondata.value.global_page = Json.global_page;
        jsondata.value.config = Json.config;
        jsondata.value.config = Object.assign(widgetForm.config, jsondata.value.config);
        Object.keys(jsondata.value.config).reduce((acc, key) => {
          if (jsondata.value.config[key] === jsondata.value.config[key]) {
            acc[key] = jsondata.value.config[key];
          }
          return acc;
        }, {});
      } else {
        jsondata.value.display_area = []; // 显示区
        jsondata.value.hidden_area = []; // 隐藏区
        jsondata.value.trash_area = []; // 回收站区
        jsondata.value.button_area = []; // 按钮区
        jsondata.value.global_page = {}; // 全局页面
      }
    } else if (pattern.value == 'phone') {
      const { data } = await getPhoneUnitJson({ id: props.data.dataId.id });
      JsonContrast.value = data;
      let Json;
      if (data != '') {
        Json = JSON.parse(data);
        jsondata.value.display_area = Json.display_area;
        jsondata.value.hidden_area = Json.hidden_area;
        jsondata.value.trash_area = Json.trash_area;
        jsondata.value.button_area = Json.button_area;
        jsondata.value.global_page = Json.global_page;
        jsondata.value.config = Json.config;
        jsondata.value.config = Object.assign(widgetForm.config, jsondata.value.config);
        jsondata.value.phoneHeaderConfig = Json.phoneHeaderConfig;
        jsondata.value.phoneHeaderConfig = Object.assign(
          widgetForm.phoneHeaderConfig,
          jsondata.value.phoneHeaderConfig,
        );
        Object.keys(jsondata.value.config).reduce((acc, key) => {
          if (jsondata.value.config[key] === jsondata.value.config[key]) {
            acc[key] = jsondata.value.config[key];
          }
          return acc;
        }, {});
      } else {
        jsondata.value.display_area = []; // 显示区
        jsondata.value.hidden_area = []; // 隐藏区
        jsondata.value.trash_area = []; // 回收站区
        jsondata.value.button_area = []; // 按钮区
        jsondata.value.global_page = {}; // 全局页面
      }
    }
    ysKey.value++;
    await setTimeout(() => {
      momUpdate(rightLowCodeShow.value, props.data.dataId.id);
    });
  };
  interface permissions {
    element_code: string;
    element_name: string;
    id: string;
  }
  const handleList = (list) => {
    const newList: permissions[] = [];
    if (list) {
      list.forEach((item) => {
        if (item) {
          if (item.element_permissions) {
            newList.push({
              element_code: item.element_code,
              element_name: item.element_name,
              id: item.id,
            });
          }
          if (item.panes || item.columns || item.panel || item.list) {
            newList.push(...handleList(item.panes || item.columns || item.panel || item.list));
          }
        }
      });
    }
    return newList;
  };
  const handleGetLanguaggeNum = async (val: any) => {
    ElMessageBox.confirm(
      '自动转换只支持中文转英文，获取多语言编号的时间较长，请耐心等待?',
      '提示',
      {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(async () => {
      const loading = ElLoading.service({
        lock: true,
        text: '获取中',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      await publicFunction(val);
      const data: permissions[] = [];
      if (jsondata.value.display_area) {
        const dataList = handleList(jsondata.value.display_area);
        dataList.forEach((item) => {
          data.push(item);
        });
      }
      if (jsondata.value.hidden_area) {
        const dataList = handleList(jsondata.value.hidden_area);
        dataList.forEach((item) => {
          data.push(item);
        });
      }
      if (jsondata.value.trash_area) {
        const dataList = handleList(jsondata.value.trash_area);
        dataList.forEach((item) => {
          data.push(item);
        });
      }
      if (jsondata.value.button_area) {
        const dataList = handleList(jsondata.value.button_area);
        dataList.forEach((item) => {
          data.push(item);
        });
      }

      const { data: responseData } = await GetLanguaggeNum({
        jsondata: JSON.stringify(jsondata.value),
        id: props.data.dataId.id,
        permissions_data: JSON.stringify(data),
      });
      console.log('responseData', responseData);
      JsonContrast.value = responseData;
      let Json;
      if (responseData != '') {
        Json = JSON.parse(responseData);
        jsondata.value.display_area = Json.display_area;
        jsondata.value.hidden_area = Json.hidden_area;
        jsondata.value.trash_area = Json.trash_area;
        jsondata.value.button_area = Json.button_area;
        jsondata.value.global_page = Json.global_page;
        jsondata.value.config = Json.config;
        jsondata.value.config = Object.assign(widgetForm.config, jsondata.value.config);
        jsondata.value.phoneHeaderConfig = Json.phoneHeaderConfig;
        jsondata.value.phoneHeaderConfig = Object.assign(
          widgetForm.phoneHeaderConfig,
          jsondata.value.phoneHeaderConfig,
        );
        Object.keys(jsondata.value.config).reduce((acc, key) => {
          if (jsondata.value.config[key] === jsondata.value.config[key]) {
            acc[key] = jsondata.value.config[key];
          }
          return acc;
        }, {});
      }
      ysKey.value++;
      await setTimeout(() => {
        momUpdate(rightLowCodeShow.value, props.data.dataId.id);
      });
      loading.close();
    });
  };
  const handleSendJson = async (val: any) => {
    publicFunction(val);
    handleSave();
  };
  const handleSave = async () => {
    const data: permissions[] = [];
    if (jsondata.value.display_area) {
      const dataList = handleList(jsondata.value.display_area);
      dataList.forEach((item) => {
        data.push(item);
      });
    }
    if (jsondata.value.hidden_area) {
      const dataList = handleList(jsondata.value.hidden_area);
      dataList.forEach((item) => {
        data.push(item);
      });
    }
    if (jsondata.value.trash_area) {
      const dataList = handleList(jsondata.value.trash_area);
      dataList.forEach((item) => {
        data.push(item);
      });
    }
    if (jsondata.value.button_area) {
      const dataList = handleList(jsondata.value.button_area);
      dataList.forEach((item) => {
        data.push(item);
      });
    }
    if (pattern.value == 'pc') {
      await saveUnitJson({
        jsondata: JSON.stringify(jsondata.value),
        id: props.data.dataId.id,
        permissions_data: JSON.stringify(data),
      });
    } else if (pattern.value == 'phone') {
      await savePhoneUnitJson({
        jsondata: JSON.stringify(jsondata.value),
        id: props.data.dataId.id,
        permissions_data: JSON.stringify(data),
      });
    }
  };
  const publicFunction = (value: any) => {
    const { config, display_area, hidden_area, trash_area, button_area } = JSON.parse(value);
    // widgetForm.display_area = display_area;
    // widgetForm.hidden_area = hidden_area;
    // widgetForm.trash_area = trash_area;
    // widgetForm.button_area = button_area;
    // widgetForm.config = config;
    jsondata.value.display_area = display_area;
    jsondata.value.hidden_area = hidden_area;
    jsondata.value.trash_area = trash_area;
    jsondata.value.button_area = button_area;
    jsondata.value.config = config;
  };
  const handlePagesJson = async () => {
    handleSave();
  };
  const handleTabsChange = async (activeName, oldActiveName) => {
    activeNameChild.value = activeName;
    oldActiveNameChild.value = oldActiveName;
  };
  // const handleClose = () => {
  //   unitPermissionsRight.value = false;
  // };
  const handleClosePermission = () => {
    treePermission.value = false;
  };
  const sendHandleSelectCommand = async (value) => {
    formData.formFields.rightdataName = value.text;
    formData.formFields.rightdataId = value.id;
    treePermission.value = false;
  };
  provide('sendHandleSelectCommand', sendHandleSelectCommand);
</script>

<template>
  <div class="page_content">
    <ElTabs
      type="card"
      :before-leave="handleTabsChange"
      v-model="tabsBindValues"
      v-if="rightLowCodeShow"
      class="page_content_tabs"
    >
      <!--  -->

      <ElTabPane v-for="item in tabsValue" :name="item.value" :key="item.value" :label="item.value">
        <template #label>
          <span class="custom-tabs-label">
            <SvgIcon :color="item.color" :name="item.icons" />
            <span class="page_content_titleValue">{{ item.value }}</span>
          </span>
        </template>
        <template #default>
          <div class="page_content_unit" v-show="item.value == '单元'">
            <ElementForm
              ref="myform"
              v-if="item.value == '单元'"
              :loadKey="GroupIs ? formGroup.loadKey : formData.loadKey"
              :formFields="GroupIs ? formGroup.formFields : formData.formFields"
              :formRules="GroupIs ? formGroup.formRules : formData.formRules"
              :labelWidth="110"
              @update:value="hanldFromData"
            >
              <div style="text-align: center">
                <ElButton type="primary" :loading="loadingIcon" @click="getForm()">提交</ElButton>
              </div>
            </ElementForm>
          </div>
          <div class="page_content_pages" v-if="item.value == '页面'">
            <webEditor
              v-if="tabsBindValues == '页面'"
              :data="childrenId"
              @update:value="handlePagesJson"
              :elementJson="jsondata"
            />
          </div>
          <div class="page_content_element" v-if="item.value == '元素'">
            <ElementPages
              v-if="tabsBindValues == '元素'"
              :key="ysKey"
              @send-savejson="handleSendJson"
              @sendTabsJson="handleTabsJson"
              :data="data"
              :elementJson="jsondata"
              :activeName="activeNameChild"
              :oldActiveName="oldActiveNameChild"
              :isTables="isTables"
              :pattern="pattern"
              :basicFields="basicFields"
              @sendPattern="handleSendPattern"
              @get-languagge-num="handleGetLanguaggeNum"
            />
          </div>
          <div
            class="page_content_build"
            :class="{ 'page-content-phone': pattern == 'phone' }"
            v-if="item.value == '预览'"
          >
            <div class="build" v-if="tabsBindValues == '预览' && pattern == 'pc'">
              <iframe :src="html"></iframe>
            </div>
            <div class="build" v-if="tabsBindValues == '预览' && pattern == 'phone'">
              <div class="phone-head">
                <div class="center-line"></div>
              </div>
              <div class="phone-content">
                <iframe :src="html"></iframe>
              </div>
              <div class="phone-tab"></div>
            </div>
          </div>
        </template>
      </ElTabPane>
    </ElTabs>
    <!-- <ElDialog
      :model-value="unitPermissionsRight"
      title="单元权限"
      :before-close="handleClose"
      :destroy-on-close="true"
    >
      <ElementForm
        ref="myformUnit"
        :loadKey="formDataUnit.loadKey"
        :formFields="formDataUnit.formFields"
        :formRules="formDataUnit.formRules"
        :labelWidth="110"
      >
        <div style="text-align: center">
          <ElButton type="primary" @click="getFormUnit()">确认</ElButton>
        </div>
      </ElementForm>
    </ElDialog> -->
    <ElDialog
      :model-value="treePermission"
      title="选择数据权限"
      width="60%"
      :before-close="handleClosePermission"
      :destroy-on-close="true"
    >
      <LeftTree :data="data" :islower="true" />
    </ElDialog>
  </div>
</template>

<style lang="scss" scoped>
  .page_content {
    &_tabs {
      height: 100vh;
      :deep(.el-tabs__nav-scroll) {
        box-sizing: border-box;
        padding-left: 60px;
      }
    }
    &_unit {
      box-sizing: border-box;
      padding: 0 45px;
      margin-top: 15px;
    }
    &_titleValue {
      margin-left: 10px;
    }
    &_pages {
      height: calc(100vh - 56px);
      margin-top: 15px;
    }
    &_element {
      height: calc(100vh - 41px);
    }
    &_build {
      height: calc(100vh - 40px);
      .build {
        height: $height;
        iframe {
          height: $height;
          width: $width;
          border: none;
        }
      }
    }
    :deep(.el-tabs__header) {
      margin: 0;
    }
  }
  .page-content-phone {
    display: flex;
    justify-content: center;
    background-color: #f6f6f6;
    .build {
      width: 430px;
      border-radius: 50px;
      background-color: #fff;

      .phone-head {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

        .center-line {
          border-radius: 5px;
          height: 5px;
          width: 60px;
          background: black;
        }
      }

      .phone-content {
        height: calc(100% - 120px);
        border-top: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
      }

      .phone-tab {
        height: 60px;
      }
    }
  }
</style>
